<template>
	<view class="image-tools">
		<u-form :model="imageStyle" labelPosition="top">
			<u-form-item label="图片源">
				<u-radio-group 
					v-model="imageSource" 
					placement="row"
					@change="changeSource">
					<u-radio 
						v-for="item in sourceOptions" 
						:key="item.value" 
						:label="item.label" 
						:name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>

			<template v-if="imageSource === 'local'">
				<u-form-item label="上传图片">
					<u-upload
						:fileList="fileList"
						@afterRead="afterRead"
						@delete="deletePic"
						multiple
						:maxCount="1"
						uploadText="选择图片">
					</u-upload>
				</u-form-item>
			</template>

			<template v-else>
				<u-form-item label="图片URL">
					<u-input v-model="imageUrl" placeholder="请输入图片URL"></u-input>
				</u-form-item>
			</template>

			<u-form-item label="图片宽度">
				<u-number-box 
					v-model="imageStyle.width" 
					:min="50" 
					:max="800"
					integer>
				</u-number-box>
			</u-form-item>

			<u-form-item label="图片高度">
				<u-number-box 
					v-model="imageStyle.height" 
					:min="50" 
					:max="600"
					integer>
				</u-number-box>
			</u-form-item>

			<u-button 
				type="primary" 
				@click="addImageElement"
				:disabled="!validImage">
				添加图片
			</u-button>
		</u-form>

		<view class="preview-box" v-if="previewImage">
			<image 
				:src="previewImage" 
				mode="aspectFit"
				:style="{
					width: imageStyle.width + 'px',
					height: imageStyle.height + 'px'
				}">
			</image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imageSource: 'local',
			sourceOptions: [
				{ label: '本地图片', value: 'local' },
				{ label: '网络图片', value: 'url' }
			],
			fileList: [],
			imageUrl: '',
			imageStyle: {
				width: 200,
				height: 150
			}
		}
	},
	computed: {
		previewImage() {
			if (this.imageSource === 'local' && this.fileList.length > 0) {
				return this.fileList[0].url
			} else if (this.imageSource === 'url' && this.imageUrl) {
				return this.imageUrl
			}
			return null
		},
		validImage() {
			return (this.imageSource === 'local' && this.fileList.length > 0) || 
				   (this.imageSource === 'url' && this.imageUrl)
		}
	},
	methods: {
		changeSource() {
			this.fileList = []
			this.imageUrl = ''
		},
		afterRead(event) {
			const file = event.file
			this.fileList = file.map(item => ({
				...item,
				url: item.url || item.tempFilePath
			}))
		},
		deletePic() {
			this.fileList = []
		},
		addImageElement() {
			const newElement = {
				type: 'image',
				src: this.previewImage,
				style: {
					...this.imageStyle,
					left: 100,
					top: 100
				}
			}

			this.$emit('addElement', newElement)
			this.fileList = []
			this.imageUrl = ''
		}
	}
}
</script>

<style lang="scss" scoped>
.image-tools {
	padding: 20rpx;

	.preview-box {
		margin-top: 40rpx;
		padding: 20rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 200rpx;
	}
}
</style>